<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>
            苹果1
            <a href="#">删除</a>
        </li>
        <li>苹果2<a href="#">删除</a></li>
        <li>苹果3<a href="#">删除</a></li>
        <li>苹果4<a href="#">删除</a></li>
        <li>苹果5<a href="#">删除</a></li>
        <li>苹果6<a href="#">删除</a></li>
        <li>苹果7<a href="#">删除</a></li>
        <li>苹果8<a href="#">删除</a></li>
    </ul>
    <script>
        var aList = document.querySelectorAll('li a');
        for (var i = 0; i < aList.length; i++) {
            aList[i].onclick = function(){
                // 此处千万不用使用变量 i,循环完成后i的值是数组长度
                // 删除li ul.removeChild(li)
                // this 表示的是 a标签
                var ul = this.parentNode.parentNode;
                var li = this.parentNode;
                ul.removeChild(li);
                // 合并写法
                // this.parentNode.parentNode.removeChild(this.parentNode);
            }
        }
    </script>
</body>

</html>